<template>
  <div>
    <el-alert v-if="!isVisible" title="未选择组织" description="点击左侧的组织可对该组织进行成员管理" type="warning" show-icon :closable="false"></el-alert>
    <template v-if="isVisible">
      <div class="filter-container">
        <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="showAddMemberDialog()">添加组织成员</el-button>
        <el-button class="filter-item" type="default" icon="el-icon-refresh" style="float: right;" @click="refreshMembers()">刷新成员列表</el-button>
      </div>
      <el-table :key="tableKey" v-loading="tableLoading" :data="items" border fit highlight-current-row style="width: 100%;">
        <el-table-column :label="'用户名'" prop="userName" width="150" align="center"></el-table-column>
        <el-table-column :label="'昵称'" prop="nickName" width="150" align="center"></el-table-column>
        <el-table-column :label="'加入时间'" prop="addedTime" width="180" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.addedTime | parseTime("{y}-{m}-{d} {h}:{i}:{s}") }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" width="150">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isBoss" title="负责人" type="danger">负责人</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="200" align="center">
          <template slot-scope="{ row }">
            <el-button type="text" @click="removeMember(row.id)">移除人员</el-button>
            <el-divider direction="vertical"/>
            <el-button type="text" @click="setToBoss(row.id)">设置为负责人</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="totalCount > 0" :total="totalCount" :page-index.sync="q.pageIndex" :page-size.sync="q.pageSize" @pagination="getList"/>
      <add-member-dialog ref="addMemberDialog" @save="refreshMembers()"></add-member-dialog>
    </template>
  </div>
</template>
<script>
import Pagination from "@/components/Pagination";
import AddMemberDialog from "./AddMemberDialog";
import { getOrganizationUnitUserPagingList, removeUserFromOrganizationUnit, setUserToOrganizationUnitBoss } from "@/api/organization-unit";

export default {
  components: {
    pagination: Pagination,
    "add-member-dialog": AddMemberDialog
  },
  data() {
    return {
      q: {
        organizationUnitId: undefined,
        pageIndex: 1,
        pageSize: 10
      },
      totalCount: 0,
      items: [],
      tableLoading: true,
      tableKey: 0
    };
  },
  computed: {
    isVisible() {
      return this.q.organizationUnitId && this.q.organizationUnitId > 0;
    }
  },
  created() {
    this.load();
  },
  methods: {
    show(id) {
      if (id) {
        this.q.organizationUnitId = id;
        this.load();
      } else {
        this.q.organizationUnitId = undefined;
      }
    },
    refreshMembers() {
      this.load();
    },
    load() {
      this.q.pageIndex = 1;
      this.getList();
    },
    getList() {
      this.tableLoading = true;
      getOrganizationUnitUserPagingList(this.q).then(result => {
        this.items = result.items;
        this.totalCount = result.totalCount;
        this.tableLoading = false;
      });
    },
    showAddMemberDialog() {
      this.$refs["addMemberDialog"].show(this.q.organizationUnitId);
    },
    removeMember(userId) {
      this.$confirm("确定将该用户移出该组织吗？", "提示", { type: "warning" })
        .then(() => {
          removeUserFromOrganizationUnit(userId, this.q.organizationUnitId).then(() => {
            this.$message({ message: "移出成功", type: "success" });
            this.refreshMembers();
          });
        })
        .catch(() => {});
    },
    setToBoss(userId) {
      this.$confirm("确定将该用户设置为负责人吗？", "提示", { type: "warning" })
        .then(() => {
          setUserToOrganizationUnitBoss({ userId: userId, organizationUnitId: this.q.organizationUnitId }).then(() => {
            this.$message({ message: "设置成功", type: "success" });
            this.refreshMembers();
          });
        })
        .catch(() => {});
    }
  }
};
</script>
